<template>
    <div>
        <Row>
            <i-col span="20">
                <Row>
                    <Card>
                        <p slot="title">
                            <Icon type="person"></Icon>
                            编辑零工服务
                        </p>
                        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">

                            <FormItem label="服务名称" prop="name">
                                <Input v-model="formValidate.name" placeholder="请输入服务名称"></Input>
                            </FormItem>
                            <FormItem label="缩略图" prop="thumb">
                                <Upload ref="avatar_upload" :before-upload="beforeUpload"
                                        :show-upload-list="showProgress"
                                        type="drag"
                                        :on-success="uploadAvatarSuccess"
                                        :action="`${host}/admin/upload?token=${$store.state.access_token}`">
                                    <div style="padding: 20px 0">
                                        <img class="thumb" v-if="formValidate.thumb_url" :src="formValidate.thumb_url"/>
                                        <template v-if="!formValidate.thumb_url">
                                            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                                            <p>点击或将文件拖拽到这里上传</p>
                                        </template>
                                    </div>
                                </Upload>

                            </FormItem>
                            <FormItem label="上级分类" prop="pid">
                                <i-select transfer v-model="formValidate.pid">
                                    <i-option :key="item.id" v-for="item in services" :value="item.id">{{item.name}}
                                    </i-option>
                                </i-select>
                            </FormItem>
                            <FormItem label="简介" prop="description">
                                <Input v-model="formValidate.description" type="textarea" placeholder="请输入简介"></Input>
                            </FormItem>
                            <FormItem label="预估价格" prop="price">
                                <Input v-model="formValidate.price" icon="social-yen" placeholder="请输入预估价格"></Input>
                            </FormItem>
                            <FormItem label="单位" prop="unit">
                                <Input v-model="formValidate.unit" placeholder="请输入预估价格"></Input>
                            </FormItem>
                            <FormItem label="状态">
                                <i-switch v-model="formValidate.status" size="large">
                                    <span slot="open">启用</span>
                                    <span slot="close">禁用</span>
                                </i-switch>
                            </FormItem>
                            <FormItem label="图文详情">
                                <div>
                                    <w-editor ref="editor" :content.sync="formValidate.content"></w-editor>
                                </div>
                            </FormItem>
                            <FormItem>
                                <Button :loading="$store.state.loading" type="primary"
                                        @click="handleSubmit('formValidate')">提交
                                </Button>
                                <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">返回
                                </Button>
                            </FormItem>
                        </Form>
                    </Card>
                </Row>
            </i-col>
        </Row>
    </div>
</template>
<script type="text/jsx">

  import url from '../../config/url'
  import time from '../../libs/time'
  import ISelect from '../../../node_modules/iview/src/components/select/select.vue'
  import IOption from '../../../node_modules/iview/src/components/select/option.vue'
  import E from 'wangeditor'
  import util from '../../libs/util'

  import WEditor from '../common/components/Weditor.vue'

  export default {

    components: {
      IOption,
      ISelect,
      WEditor
    },
    name: 'service-edit',

    data () {
      return {
        editor: null,
        host: url.host,
        services: [],
        service_id: 0,
        formValidate: {
          name: '',
          pid: 0,
          thumb_url: '',
          thumb: '',
          price: '',
          description: '',
          status: true,
          content: '',
          unit: '㎡'
        },
        showProgress: false,
        ruleValidate: {
          name: [
            {required: true, message: '服务名不能为空', trigger: 'blur'}
          ],

          thumb_url: [
            {required: true, message: '请上传缩略图', trigger: 'blur'}
          ],
          description: [
            {required: true, message: '简介不能为空', trigger: 'blur'},
            {min: 5, message: '简介最少需要5个字', trigger: 'blur'},
            {max: 30, message: '简介最多只你能30个字', trigger: 'blur'}
          ],
          price: [
            {required: true, message: '预估价格不能为空', trigger: 'blur'},
            {
              pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
              message: '价格不正确',
              trigger: 'blur'
            }
          ],
          unit: [
            {required: true, message: '选择单位', trigger: 'change'}
          ],
        }

      }
    },
    computed: {},

    mounted () {
      this.loadServices()
      this.loadDetail()
    },
    destroyed () {

    },

    methods: {
      loadDetail () {
        console.log(this.$route)
        let id = this.$route.params.service_id
        let data = this.$route.params.item
        this.service_id = id
        this.formValidate.name = data.name
        this.formValidate.thumb_url = data.thumb
        this.formValidate.thumb = data.thumb
        this.formValidate.content = data.content
        this.formValidate.pid = data.pid
        this.formValidate.price = data.price
        this.formValidate.unit = data.unit
        this.formValidate.description = data.description
        this.formValidate.status = (data.status == 1 ? true : false)
        this.$refs.editor.setContent(this.formValidate.content)

      },
      beforeUpload () {
        this.showProgress = true
        return true
      },
      loadServices () {
        $api.get(url.service, {params: {pid: 0}}).then((res) => {
          if (res.status) {
            this.services = []
            let item = {id: 0, name: '顶级分类'}
            this.services.push(item)
            this.services = this.services.concat(res.data)
          }
        })
      },
      uploadAvatarSuccess (response, file, fileList) {
        this.showProgress = false
        console.log(response.data)
        this.$refs.avatar_upload.clearFiles()
        if (response.status) {
          this.formValidate.thumb_url = response.data.url
          this.formValidate.thumb = response.data.file
        }

      },
      handleSubmit (name) {

        this.$refs[name].validate((valid) => {
          if (valid) {
            let data = this.formValidate
            this.$store.commit('setLoading', {loading: true})
            data.status = data.status ? 1 : 0
            $api.put(`${url.service}/${this.service_id}`, data).then((res) => {
              this.$store.commit('setLoading', {loading: false})
              if (res.status) {
                this.$Message.success('更新成功')
                util.closeCurrentPage(this, 'service_edit')
              }
            })
          } else {
            this.$Message.error('表单验证失败!')
          }
        })

      },
      handleReset (name) {
        util.closeCurrentPage(this, 'service_edit')
        this.$router.back()
      }

    }
  }
</script>
<style lang="less" scoped>
    .fitter-panel {
        background: #f0f0f0;
        padding: 12px;
        display: flex;
        flex-direction: row;
        align-items: center;
        p {
            font-size: 12px;
            margin-left: 12px;
            margin-right: 12px;
        }
    }

    .thumb {
        max-height: 120px;
        max-width: 100%;
    }

    .button-group-panel {
        margin-top: 12px;
    }

    .table-content {
        margin-top: 12px;
    }
</style>